<template>
  <view>
    <view class="csubSectionList">
      <view
        class="csubSectionItem"
        v-for="(item, index) in csubSectionList"
        :key="index"
      >
        <view class="imgBox">
          <image :src="item.imgUrl" mode="aspectFill"></image>
        </view>
        <view class="textBox">
          <view class="title">
            {{ item.title }}
          </view>
          <view class="text">
            {{ item.text }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  props: {
    csubSectionList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
.csubSectionList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* 使每行的两个元素分布在左右两侧 */
  align-items: flex-start;
  // padding: 10px;

  .csubSectionItem {
    width: 48%;
    /* 每个元素占一半宽度，留出一些间距 */
    // height: 244rpx;
    /* 可以根据需要调整高度 */
    background-color: #ffffff;
    /* 背景颜色 */
    // display: flex;
    // justify-content: center;
    // align-items: center;
    margin-bottom: 32rpx;
    /* 每行之间的间距 */
    border-radius: 16rpx;

    .imgBox image {
      width: 100%;
      height: 144rpx;
      border-radius: 16rpx 16rpx 0rpx 0rpx;
    }

    /* 圆角 */
    .textBox {
      padding: 16rpx;

      .title {
        font-weight: bold;
        font-size: 28rpx;
        color: #303030;
      }

      .text {
        font-weight: 400;
        font-size: 20rpx;
        color: #7f7f7f;
      }
    }
  }
}
</style>
